/**
 * 学习目标：JSX插值表达式-数组、对象
 * 表达式:
 *  1. 变量
 *  2. 基础数据类型：string、number、null、boolean、undefined
 *  3. 引用数据类型: 数组、对象、函数
 *  4. 其它: JSX本身、三元、逻辑运算符
 *
 */

import React from 'react';
import ReactDOM from 'react-dom';

const person = {
  name: 'zs',
  age: 18,
  type: 'a',
  xxx: {},
};

// 数组：🔔 数组内的每项元素会直接当做一个个的dom节点渲染出来
const list = [1, 2, 3];
const list2 = [<div>1</div>, <div>2</div>, <div>3</div>];

const divNode = (
  <>
    {/* 对象：💥 对象本身不能直接放在插值表达式中. 对象的属性值，是非对象可以显示 */}
    <h1>{person.name}</h1>

    <h2>{list}</h2>
    <h3>{123}</h3>

    <div>{list2}</div>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
